<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天猫tmall.com--理想生活上天猫</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/PCcommon.css">
  <link rel="stylesheet" href="./styles/index.css">
  <script src="./js/index.js" type="module"></script>
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="center">
      <div class="left" style="height: 27px;">
        <a href="#"><span class="glyphicon glyphicon-home" style="color:red"></span>天猫首页</a>
        <span class="text">喵，欢迎来天猫</span>
        <a href="./login.html">请登录</a>
        <a href="./register.html">免费注册</a>
      </div>
      <div class="cen">
        <div class="show1">
          <a href="#">我的淘宝<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">已买到的宝贝</a>
              </li>
              <li>
                <a href="#">已卖出的宝贝</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#"><span class="glyphicon glyphicon-shopping-cart" style="color:red"></span>购物车</a>
        <div class="show2">
          <a href="#">收藏夹<span class="glyphicon glyphicon-triangle-bottom trigon"></span>
          </a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">收藏的宝贝</a>
              </li>
              <li>
                <a href="#">收藏的店铺</a>
              </li>
            </ul>
          </div>
        </div>
        <span>|</span>
      </div>
      <div class="right">
        <div class="show1">
          <a href="#"><span class="glyphicon glyphicon-phone" style="color: red;"></span>手机版</a>
          <div><img src="./img/ma.jpg" alt=""></div>
        </div>
        <a href="#">淘宝网</a>
        <a href="#">网页无障碍</a>
        <div class="show2">
          <a href="#">商家支持<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <div>
            <h5>商家：</h5>
            <ul>
              <li>
                <a href="#">商家中心</a>
              </li>
              <li>
                <a href="#">天猫规则</a>
              </li>
              <li>
                <a href="#">商家入驻</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
            </ul>
            <h5>帮助：</h5>
            <ul>
              </li>
              <h3>------------</h3>
              <li>
                <a href="#">商家服务大厅</a>
              </li>
              <li>
                <a href="#">问商友</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#">商家中心</a>
      </div>
    </div>
  </header>
  <!-- 分类 -->
  <div class="classify">
    <div class="center">
      <img src="./img/10001.png" alt="">
      <img src="./img/10002.png" alt="">
      <img src="./img/10003.png" alt="">
      <img src="./img/10004.png" alt="">
      <img src="./img/10005.png" alt="">
    </div>
  </div>
  <!-- 主体 -->
  <main>
    <div class="img1"><img src="./img/10007.png" alt="图片未加载"></div>
    <div class="center" style="height: 100%; background-color: white; border-radius: 0 0 20px 20px;">
      <!-- 搜索 -->
      <div class="search">
        <img src="./img/10006.png" alt="图片未加载" style="width: 87px; height:53px; margin: 0 0 0 73px;">
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="搜索 天猫 商品/品牌/店铺"
                style="width: 540px; height: 42px; border-radius: 20px; border-color: red;">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button"
                  style="width: 90px; height: 42px; border-radius:20px; border-color: red; background-color: red;">搜索</button>
              </span>
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
      </div>
      <!-- 导航 -->
      <div class="nav">
        <h2>主题市场</h2>
        <a href="#"><img src="./img/10009.png" alt="图片未加载" style="width: 100px; height:30px;"></a>
        <a href="#"><img src="./img/10010.png" alt="图片未加载" style="width: 100px; height:30px;"></a>
        <a href="#">天猫会员</a>
        <a href="#">喵生鲜</a>
        <a href="#">医药馆</a>
        <a href="#">魅力惠</a>
        <a href="#">飞猪旅行</a>
        <a href="#">苏宁易购</a>
        <a href="#">天猫内容</a>
      </div>
      <!-- 主题市场 -->
      <div class="theme">
        <div class="left">
          <ul>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">女装</a><span>/</span><a href="#">内衣</a>
            </li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">男装</a><span>/</span><a href="#">运动户外</a>
            </li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">女鞋</a><span>/</span><a
                href="#">男鞋</a><span>/</span><a href="#">箱包</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">美妆</a><span>/</span><a href="#">个人护理</a>
            </li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">腕表</a><span>/</span><a
                href="#">眼镜</a><span>/</span><a href="#">珠宝饰品</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">手机</a><span>/</span><a
                href="#">数码</a><span>/</span><a href="#">电脑办公</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">母婴玩具</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">零食</a><span>/</span><a
                href="#">茶酒</a><span>/</span><a href="#">进口食品</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">生鲜水果</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">大家电</a><span>/</span><a
                href="#">生活电器</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">家具</a><span>/</span><a
                href="#">灯具</a><span>/</span><a href="#">卫浴</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">汽车</a><span>/</span><a
                href="#">配件</a><span>/</span><a href="#">用品</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">家纺</a><span>/</span><a
                href="#">家饰</a><span>/</span><a href="#">鲜花</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">医药保健</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">厨具</a><span>/</span><a
                href="#">收纳</a><span>/</span><a href="#">宠物</a></li>
            <li><span class="glyphicon glyphicon-blackboard"></span><a href="#">图书音像</a></li>
          </ul>
        </div>
        <div class="cen">
          <!-- 轮播图 -->
          <div class="banner">
            <div class="top">
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <div class="item active">
                    <img src="./img/10011.webp" alt="..." style="width: 520px; height:280px;">
                  </div>
                  <div class="item">
                    <img src="./img/10012.jpg" alt="...">
                  </div>
                  <div class="item">
                    <img src="./img/10013.webp" alt="...">
                  </div>
                  <div class="item">
                    <img src="./img/10014.jpg" alt="...">
                  </div>
                  <div class="item">
                    <img src="./img/10015.jpg" alt="..." style="width: 520px; height:280px;">
                  </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>
            <div class="down">
              <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
                  <li data-target="#carousel-example-generic2" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox" style="width:520px; height: 200px;">
                  <div class="item active">
                    <div class="box">
                      <img src="./img/10016.jpg" alt="..." style="width: 256px; height:200px;">
                      <img src="./img/10017.jpg" alt="..." style="width: 256px; height:200px; padding-left: 10px;">
                    </div>
                  </div>
                  <div class="item">
                    <div class="box">
                      <img src="./img/10018.jpg" alt="..." style="width: 256px; height:200px;">
                      <img src="./img/10019.jpg" alt="..." style="width: 256px; height:200px;">
                    </div>
                  </div>
                  <div class="item">
                    <div class="box">
                      <img src="./img/10020.jpg" alt="..." style="width: 256px; height:200px;">
                      <img src="./img/10021.jpg" alt="..." style="width: 256px; height:200px;">
                    </div>
                  </div>
                  <div class="item">
                    <div class="box">
                      <img src="./img/10022.jpg" alt="..." style="width: 256px; height:200px;">
                      <img src="./img/10023.jpg" alt="..." style="width: 256px; height:200px;">
                    </div>
                  </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <a href="#"><img src="./img/10026.jpg" alt="" class="img-circle">
              <span>Hi!你好</span>
            </a>
          </div>
          <a href="#">
            <img src="./img/10027.jpg" alt="" class="img-responsive">
          </a>
          <div class="mid">
            <span class="text1">公告</span>&nbsp;&nbsp;
            <span>新鲜事儿都在这里~</span>
            <ul>
              <li><a href="#"><span>热点</span>&nbsp;&nbsp;设计创享家3D设计服务大赛来袭!</a></li>
              <li><a href="#"><span>热点</span>&nbsp;&nbsp;全球新发现，好物开抢就现在！</a></li>
              <li><a href="#"><span>热点</span>&nbsp;&nbsp;万款新品流行速递抢先看</a></li>
            </ul>
          </div>
          <div class="under">
            <!-- <i class="fp-iconfont" style="font-size: 22px; margin-left: 19px;"></i> -->
            <a href="#">
              <i class="glyphicon glyphicon-star-empty" style="font-size: 22px; margin-left: 26px;"></i>
              <div>收藏的宝贝</div>
            </a>
            <a href="#">
              <i class="glyphicon glyphicon-briefcase" style="font-size: 22px; margin-left: 26px;"></i>
              <div>买过的店铺</div>
            </a>
            <a href="#">
              <i class="glyphicon glyphicon-folder-close" style="font-size: 22px; margin-left: 26px;"></i>
              <div>收藏的店铺</div>
            </a>
            <a href="#">
              <i class="glyphicon glyphicon-time" style="font-size: 22px; margin-left: 22px;"></i>
              <div>我的足迹</div>
            </a>
          </div>
        </div>
      </div>
      <!-- 天猫超市 -->
      <div class="market">
        <div class="top">
          <img src="./img/10028.png" alt="" style="width: 107px; height:34px;">
        </div>
        <div class="buttom">
          <a href="#">
            <figure>
              <img src="./img/10029.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10030.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10031.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10032.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10033.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10034.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10035.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10036.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10037.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
          <a href="#">
            <figure>
              <img src="./img/10038.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
              <figcaption class="text1">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
              <figcaption class="text2">￥29.9</figcaption>
            </figure>
          </a>
        </div>
      </div>
      <!-- 天猫国际 -->
      <div class="inter">
        <div class="top">
          <img src="./img/10039.png" alt="" style="width: 107px; height:34px;">
        </div>
        <div class="under">
          <div class="left">
            <a href="#"><img src="./img/10040.jpg" alt="" style="width: 222px; height:302px;" class="img1"></a>
            <a href="#"><img src="./img/10041.jpg" alt="" style="width: 222px; height:302px;" class="img2"></a>
          </div>
          <div class="right">
            <a href="#">
              <figure>
                <img src="./img/10042.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10043.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10044.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10045.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10046.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10047.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10048.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
            <a href="#">
              <figure>
                <img src="./img/10049.jpg" alt="" style="width:220px; height: 220px; border-radius: 18px;">
                <figcaption class="text1">海外直购</figcaption>
                <figcaption class="text2">尖货疯抢</figcaption>
              </figure>
            </a>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="guess">
        <div class="top">
          <span>猜你喜欢</span>
          <div>个性推荐</div>
        </div>
        <div class="buttom">
          <ul class="items">
            <li class="item">
              <a href="javascirpt:;">
                <div class="picture">
                  <img src="./img/10050.jpg" alt="">
                </div>
                <div class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</div>
                <div class="price">￥29.9</div>
              </a>
            </li>
          </ul>
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10051.png" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10052.png" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10053.jpg" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10054.jpg" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10055.jpg" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10056.jpg" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10057.png" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10058.png" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
          <!-- <div class="item">
            <a href="#">
              <figure class="picture">
                <img src="./img/10059.png" alt="">
                <figcaption class="title">比比赞蛋黄酥雪媚娘12枚600g营养早餐代餐休闲零食品网红小吃糕点</figcaption>
                <figcaption class="price">￥29.9</figcaption>
              </figure>
            </a>
          </div> -->
        </div>
      </div>
    </div>
  
    <div class="img2"><img src="./img/10008.png" alt="图片未加载"></div>
  </main>
  <!-- 脚部 -->
  <footer>
    <div class="center">
      <div class="top">
        <a href="#">
          <div class="row">
            <div class="circle">优</div>
            <div class="text1">品质保障</div>
            <div class="text2">品质护航&nbsp;购物无忧</div>
          </div>
        </a>
        <a href="#">
          <div class="row">
            <div class="circle">七</div>
            <div class="text1">七天无理由退换货</div>
            <div class="text2">为您提供售后无忧保障</div>
          </div>
        </a>
        <a href="#">
          <div class="row">
            <div class="circle">特</div>
            <div class="text1">特色服务体验</div>
            <div class="text2">为您呈现不一样的服务</div>
          </div>
        </a>
        <a href="#">
          <div class="row">
            <div class="circle">帮</div>
            <div class="text1">帮助中心</div>
            <div class="text2">您的购物指南</div>
          </div>
        </a>
      </div>
      <div class="buttom">
        <div class="box">
          <h3>购物指南</h3>
          <ul>
            <li>
              <a href="#">免费注册</a>
            </li>
            <li>
              <a href="#">开通支付宝</a>
            </li>
            <li>
              <a href="#">支付宝充值</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>天猫保障</h3>
          <ul>
            <li>
              <a href="#">发票保障</a>
            </li>
            <li>
              <a href="#">售后规则</a>
            </li>
            <li>
              <a href="#">物流时效保障</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>支付方式</h3>
          <ul>
            <li>
              <a href="#">快捷支付</a>
            </li>
            <li>
              <a href="#">信用卡</a>
            </li>
            <li>
              <a href="#">余额宝</a>
            </li>
            <li>
              <a href="#">蚂蚁花呗</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>商家服务</h3>
          <ul>
            <li>
              <a href="#">天猫规则</a>
            </li>
            <li>
              <a href="#">商家入驻</a>
            </li>
            <li>
              <a href="#">商家中心</a>
            </li>
            <li>
              <a href="#">天猫必修课</a>
            </li>
            <li>
              <a href="#">喵言喵语</a>
            </li>
            <li>
              <a href="#">运营服务</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>手机天猫</h3>
          <a href="#"><img src="./img/erweima.png" alt="" style="width: 105px; height:105px;"></a>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

<script src="./js/jquery.min.js"></script>
<script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>